<template>
  <!-- 横向柱状图 -->
  <!-- 外框 -->
  <div class="multiBeam">
    <div style="width: 100%; height: 100%">
      <div :id="'multTypeRevision' + getId" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
// const echarts = require('echarts')
import * as echarts from 'echarts'

// const myShape = {
//   x: 0,
//   y: 0,
//   width: 5 // 间距
// }
console.log(echarts.graphic)
console.log(1)
// 绘制左侧面
// var InclinedRoofBar = echarts.graphic.extendShape({
//   shape: myShape,
//   buildPath: (ctx, shape) => {
//     // 会canvas的应该都能看得懂，shape是从custom传入的
//     const xAxisPoint = shape.xAxisPoint
//     const c0 = [shape.x, shape.y]
//     const c1 = [shape.x + 14, shape.y - 10]
//     const c2 = [xAxisPoint[0], xAxisPoint[1] - 10]
//     const c3 = [xAxisPoint[0], xAxisPoint[1]]
//     ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
//   }
// })
// 注册三个面图形
// echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)

export default {
  name: 'Crosswise',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    chartData: {
      type: Array
    },
    /** id */
    getId: {
      type: String,
      default: 'Id'
    },
    /** 颜色 */
    color: {
      type: String,
      default: '#4284ce'
    },
    /** 左侧的柱状图grid */
    gridLeft: {
      type: Object,
      default: () => {
        return {
          width: '37%',
          height: '100%',
          left: '6%',
          top: '3%',
          bottom: '3%'
        }
      }
    },
    /** 外框左侧文字边距 */
    leftpadding: {
      type: Array,
      default: () => {
        return [0, 0, 10, -50]
      }
    },
    /** 外框右侧文字边距 */
    rightpadding: {
      type: Array,
      default: () => {
        return [0, -30, 0, 15]
      }
    }
  },
  data() {
    return {
      chart: null,
      scoreOption: {}
    }
  },
  watch: {
    chartData: {
      handler(val, oldVal) {
        // if (val !== oldVal) {
        this.scoreOption.yAxis[0].data = val[0].name
        this.scoreOption.yAxis[1].data = val[0].data
        this.scoreOption.yAxis[3].data = val[1].name
        this.scoreOption.yAxis[4].data = val[1].data
        // 左侧部分
        this.scoreOption.series[0].data = val[0].data
        this.scoreOption.series[1].data = val[0].total
        val[0].data.forEach((item, index) => {
          this.scoreOption.series[2].data[index] = {
            value: item,
            symbolPosition: 'end'
          }
        })
        // 右侧部分
        this.scoreOption.series[3].data = val[1].data
        this.scoreOption.series[4].data = val[1].total
        val[1].data.forEach((item, index) => {
          this.scoreOption.series[5].data[index] = {
            value: item,
            symbolPosition: 'end'
          }
        })
        this.scoreOption.grid[1].height = val[1].height || '100%'

        // }
        this.chart.setOption(this.scoreOption)
      },
      deep: true
    }
  },
  mounted() {
    this.draw()
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize)
    window.onresize = null
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('multTypeRevision' + this.getId))
      this.scoreOption = {
        color: ['#B4EC51', '#019BFD'],
        grid: [
          this.gridLeft,
          {
            // 右侧的柱状图grid
            width: '37%',
            // left: '52%',
            height: '100%',
            top: '3%',
            right: '6%',
            bottom: '3%'
          }
        ],
        xAxis: [
          {
            // 左侧柱状图的X轴
            gridIndex: 0, // x 轴所在的 grid 的索引
            show: false
          },
          {
            // 右侧柱状图的X轴
            gridIndex: 1, // x 轴所在的 grid 的索引
            show: false
          }
        ],
        yAxis: [
          {
            // 左侧柱状图的Y轴
            gridIndex: 0, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              verticalAlign: 'center',
              align: 'left',
              padding: this.leftpadding,
              textStyle: {
                color: '#666666',
                fontSize: '16',
                fontFamily: 'MicrosoftYaHei',
                fontWeight: 'normal',
                fontStretch: 'normal'
              }
            },
            // data: ['驳回', '确认违法', '变更', '终止-调解', '其他'],
            data: [],
            inverse: true
          },
          {
            // 左侧柱状图的Y轴
            gridIndex: 0, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            // data: [15, 18, 10, 10, 10],
            data: [],
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: 'center',
              align: 'right',
              padding: this.rightpadding,
              textStyle: {
                color: '#666666',
                fontFamily: 'Orbitron',
                fontSize: '18px',
                fontWeight: 'normal',
                fontStretch: 'normal'
              },
              formatter: value => {
                return '{x|' + value + '%}'
              },
              rich: {
                y: {
                  color: '#666666',
                  fontSize: 12
                },
                x: {
                  fontFamily: 'Orbitron',
                  fontSize: '18px',
                  fontWeight: 'normal',
                  fontStretch: 'normal',
                  color: '#666666'
                }
              }
            }
          },
          {
            // 左侧柱状图的Y轴
            gridIndex: 0, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            data: []
          },
          {
            // 右侧柱状图的Y轴
            gridIndex: 1, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              verticalAlign: 'center',
              align: 'right',
              padding: [0, 0, 0, -80],
              textStyle: {
                color: '#666666',
                fontSize: '16',
                fontFamily: 'MicrosoftYaHei',
                fontWeight: 'normal',
                fontStretch: 'normal'
              }
            },
            // data: ['维持', '撤销', '责令履行', '终止-其它'],
            data: [],
            inverse: true
          },
          {
            // 右侧柱状图的Y轴
            gridIndex: 1, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            data: [],
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: 'center',
              align: 'right',
              padding: [0, -35, 0, 5],
              textStyle: {
                fontFamily: 'Orbitron',
                fontSize: '18px',
                fontWeight: 'normal',
                fontStretch: 'normal',
                color: '#666666'
              },
              formatter: value => {
                return '{x|' + value + '%}'
              },
              rich: {
                y: {
                  color: '#befbff',
                  fontSize: 14
                },
                x: {
                  fontFamily: 'Orbitron',
                  fontSize: '18px',
                  fontWeight: 'normal',
                  fontStretch: 'normal',
                  color: '#666666'
                }
              }
            }
          },
          {
            // 右侧柱状图的Y轴
            gridIndex: 1, // y轴所在的 grid 的索引
            splitLine: 'none',
            axisTick: 'none',
            axisLine: 'none',
            data: []
          }
        ],
        series: [
          {
            type: 'bar',
            name: '内框',
            xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barWidth: 19,
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)', // 内框颜色
                barBorderRadius: 12
              },
              data: []
            }
          },
          {
            name: '外框',
            type: 'bar',
            xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 2, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barGap: '-100%',
            data: [],
            barWidth: 28,
            itemStyle: {
              normal: {
                color: '#f6f6f6', // 外边框颜色
                barBorderRadius: 12 // 外边框圆角角度
              }
            },
            z: 0
          },
          //   光点
          {
            name: '备案通过率',
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)'
              }
            },
            symbolSize: [10, 10], // 位置
            symbolOffset: [-5, 0],
            z: 15, // 透明度-层级
            data: []
          },
          {
            type: 'bar',
            name: '内框',
            xAxisIndex: 1, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 3, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barWidth: 19,
            // grid: {
            //   left: '20px'
            // },
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
                barBorderRadius: 12
              },
              data: []
            }
          },
          {
            name: '外框',
            type: 'bar',
            xAxisIndex: 1, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 5, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            barGap: '-100%',
            data: [],
            barWidth: 30,
            itemStyle: {
              normal: {
                color: '#f6f6f6',
                barBorderRadius: 12,
                padding: [0, 15]
              }
            },
            z: 0
          },
          //   光点
          {
            name: '备案通过率',
            value: '#fff',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)'
              }
            },
            type: 'pictorialBar',
            xAxisIndex: 1, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 3, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            symbolSize: [10, 10],
            symbolOffset: [-5, 0],
            z: 15,
            data: []
          }
        ]
      }
      this.chart.setOption(this.scoreOption)
      window.addEventListener('resize', this.onResize)
    },
    onResize() {
      this.chart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.multiBeam {
  width: 100%;
  height: 100%;
}
</style>

